<style scoped lang="less"></style>
<template>
  <div>
    <Row>
      <Col span="24">
        <Card style="margin-bottom: 10px">
          <Form inline>
            <FormItem style="margin-bottom: 0">
              <Select v-model="searchConf.type" clearable placeholder="请选择状态" style="width:100px">
                <!--                //订单类型 0 全部 1未付款 2待使用 3待收货 4待评价5已过期6已退款-->
                <Option :value="0">全部</Option>
                <Option :value="1">待付款</Option>
                <Option :value="2">待使用</Option>
                <Option :value="3">待收货</Option>
                <Option :value="4">待评价</Option>
                <Option :value="5">已过期</Option>
                <Option :value="6">已退款</Option>
              </Select>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Select v-model="searchConf.search_type" clearable placeholder="请选择类别" style="width:100px">
                <Option :value="1">买家姓名</Option>
                <Option :value="2">买家手机号</Option>
                <Option :value="3">订单编号</Option>
              </Select>
            </FormItem>
            <FormItem style="margin-bottom: 0" label="">
              <label>
                <Input v-model="searchConf.keywords" placeholder=""></Input>
              </label>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <!--        <QAuth :access="'admin/User/add'">-->

          <!--        </QAuth>-->

          <div>
            <Table :columns="columnsList" :data="tableData" border disabled-hover @on-sort-change="sortChange"></Table>
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="tableShow.listCount" :current="tableShow.currentPage"
                  :page-size="tableShow.pageSize" @on-change="changePage"
                  @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
          </div>
        </Card>
      </Col>
    </Row>
    <Modal
      v-model="refundModel"
      title="确认退款吗"
      @on-ok="refundOk">
      <div>
        <RadioGroup v-model="refundType">
          <Radio :label="GLOBAL.REFUND_TO_WALLET">退到余额</Radio>
          <Radio :label="GLOBAL.REFUND_TO_ORIGINAL">原路退回</Radio>
        </RadioGroup>
      </div>
    </Modal>
  </div>
</template>
<script>
  import {getList, del,refund} from '@/api/orders'
  import {checkPhoneNum} from '@/libs/util'

  const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
      props: {

        confirm: true,
        title: '您确定要删除这条数据吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
          del(currentRow.id).then(response => {
            vm.tableData.splice(index, 1)
            vm.$Message.success(response.data.msg)
          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          size: 'small',
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, vm.$t('delete_button'))
    ])
  };
  const viewButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        size: 'small',
        type: 'default'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.$router.push('/orders/order-detail/' + currentRow.id);
        }
      }
    }, vm.$t('view_button'))
  };
  const refundButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        size: 'small',
        type: 'info'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.handleRefund(currentRow.id,index);
        }
      }
    }, '退款')
  };


  export default {
    name: 'order_list',
    data() {
      return {
        refundIndex:-1,
        refundId:null,
        refundType:0,
        refundModel:false,
        active_id: null,
        goods_type: null,
        columnsList: [
          {
            title: '订单编号',
            key: 'id',
            width: 120,
            align: 'center'
          },
          {
            title: '买家手机号',
            align: 'center',
            key: 'user_phone',
            width: 125
          },
          {
            title: '买家名',
            align: 'center',
            key: 'user_name',
            width: 80
          },
          {
            title: '店铺名',
            align: 'center',
            key: 'store_name',
            width: 100
          },
          {
            title: '活动',
            align: 'center',
            render: (h, params) => {
              return h('span', params.row.item[0].goods_title)
            },
            width: 220
          },
          {
            title: '创建日期',
            align: 'center',
            sortable: 'custom',
            sortType: 'desc',
            key: 'create_time',
            width: 180
          },
          {
            title: '支付金额',
            align: 'center',
            render: (h, params) => {
              return h('span', params.row.pay_amount / 100)
            },
            width: 120
          },
          {
            title: '订单状态',
            align: 'center',
            render: (h, params) => {
              return h('span', this.GLOBAL.getOrderStatus(params.row.pay_status, params.row.trade_status))
            },
            width: 120
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              let canRefund = false;
              if (params.row.pay_status === this.GLOBAL.PAY_STATUS_PAID_ONLINE && (params.row.trade_status === this.GLOBAL.ORDER_STATUS_NORMAL || params.row.trade_status === this.GLOBAL.ORDER_STATUS_EXPIRE)) {
                canRefund = true;
              }
              return h('div', [
                viewButton(this, h, params.row, params.index),
                deleteButton(this, h, params.row, params.index),
                canRefund ? refundButton(this, h, params.row, params.index) : null
              ])
            }
          }
        ],
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 10,
          listCount: 0
        },
        searchConf: {
          search_type: '',
          type: 0,
          keywords: '',
          sort: 'desc'
        },
      }
    },
    created() {
      this.init();
    },
    watch: {
      // 监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to, from) {
        // 重置数据
        Object.assign(this.$data, this.$options.data());
        /** 初始化其他数据 */
        this.init();
      }
    },
    methods: {
      init() {
        let active_id = this.$route.params.active_id;
        if (active_id !== undefined && active_id != null) {
          this.active_id = active_id;
        }
        if(this.$route.name==='vip_orders_list'){
          this.goods_type = this.GLOBAL.ACTIVE_TYPE_VIP
        }
        this.getList()
      },
      refundOk(){
        if(this.refundType===-1){
          this.$Message.error('请选择退款类型');
          return false;
        }else {
          let vm = this;
          refund(this.refundId,this.refundType).then(rep=>{
            vm.$Message.success('退款操作成功');
            vm.refundModel = false;
            vm.getList();
          })
        }
      },
      handleRefund (id,index) {
        this.refundIndex = index;
        this.refundId = id;
        this.refundType = -1;
        this.refundModel = true;
      },
      sortChange(sort) {
        this.searchConf.sort = sort.order;
        this.getList()
      },
      changePage(page) {
        this.tableShow.currentPage = page
        this.getList()
      },
      changeSize(size) {
        this.tableShow.pageSize = size
        this.getList()
      },
      search() {
        this.tableShow.currentPage = 1
        this.getList()
      },
      getList() {
        let vm = this
        if (vm.searchConf.search_type === 2) {
          if (!checkPhoneNum(vm.searchConf.keywords)) {
            vm.$Message.error('请输入正确的手机号');
            return;
          }
        }
        let params = {
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize,
          type: vm.searchConf.type,
          search_type: vm.searchConf.search_type,
          sort: vm.searchConf.sort,
          goods_id: vm.active_id,
          goods_type: vm.goods_type,
          keywords: vm.searchConf.keywords
        }
        getList(params).then(response => {
          vm.tableData = response.data.data.list
          vm.tableShow.listCount = response.data.data.count
        })
      }
    }
  }
</script>
